<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border: 10px red solid;
            /* 将ul设置为弹性容器 */
            display: flex;
            /* 指定元素中弹性元素的排列方式
                可选值
                 row 默认值 弹性元素在容器中水平排列（自左向右）
                 row-reverse 自右向左排列
                 column 弹性元素纵向排列(自上向下)
                 column-reverse （自下向上）

                 主轴
                   弹性元素的排列方向称为主轴
                 侧轴
                    与主轴垂直方向的称为侧轴
                   
            */
            flex-direction: row;
        }

        li{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            /* 弹性元素的属性 
               flex-grow 指定弹性元素的伸展系数
                当父元素有多余空间时，子元素如何伸展
                父元素的剩余空间 会按照比例进行分配
                 可选值 
                  0  默认值  不伸展
            */
            flex-grow: 1;
            /* 
            flex-shrink 指定弹性元素的收缩系数
            当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
            可选值 
              1 默认值 剩余空间按照等比收缩
              0 不收缩


             */
            flex-shrink: 1;

        }

        li:nth-child(2){
            background-color: pink;
        }
        li:nth-child(3){
            background-color: orange;
        }

    </style>
</head>
<body>
    <!-- 弹性盒 伸缩盒 
        是CSS中的有一种布局手段，主要是代替浮动完成页面布局
        flex可以使元素具有弹性，让元素可以跟随页面的大小改变而改变
        弹性容器
          要使用弹性盒，必须先将一个元素设置诶弹性容器
          display:flex 设置为块级弹性容器
          display:inline-flex 设置为行内弹性容器

        弹性元素
          弹性容器的直接子元素是弹性元素（弹性项）
          一个元素是可以同时是弹性容器和弹性元素
    -->

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
</body>
</html>